<template>
  <div>
    <h2>任务列表</h2>

    <!-- 当没有任务时显示 -->
    <p v-show="infoarr1.length === shul">没有任务</p>

    <StuDemo2 :infoarr1="infoarr1" @tog="toggleTask"></StuDemo2>

    <p>已完成任务数：{{ shul }}</p>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import StuDemo2 from './components/StuDemo2.vue'

export interface Ins {
  id: number
  renwu: string
  zt: boolean
}

const infoarr1 = ref<Ins[]>([
  {
    id: 1,
    renwu: '跑步',
    zt: false
  },
  {
    id: 2,
    renwu: '跳绳',
    zt: false
  }
])

// 切换任务的完成状态
const toggleTask = (item: Ins) => {
  item.zt = !item.zt
}

const shul = computed(() => {
  return infoarr1.value.filter((item) => item.zt).length
})
</script>

<style lang="scss" scoped>
.not-completed {
  color: black;
}
</style>
